// console.log(lrc,'lrc')
//获取需要的dom
var dom = {
        audio: document.querySelector('audio'),
        ul: document.querySelector('.content ul'),
        content: document.querySelector('.content')
}
/**
 * 文档注释
 * 解析歌词字符串
 * 得到一个歌词对象的数组
 * 每个歌词对象：{time:开始时间，word:歌词文本}
 */
function parseLrc() {
        var lines = lrc.split('/n');
        var result = []
        // console.log(lines,'lines')
        for (var i = 0; i < lines.length; i++) {
                var p = lines[i]
                var past = p.split(']')
                var pastTime = past[0].split('[')
                // var filteredPastTime = pastTime.filter(time => time.length > 0);
                // console.log(pastTime, 'pastTime')
                var obj = {
                        time: parseTime(pastTime[1]),
                        words: past[1]
                }
                result.push(obj)
        }
        console.log(result, 'result')
        return result
}
/**
 * 将一个时间字符串解析为数字
 * 
 * 
 */
function parseTime(timeStr) {
        if (timeStr) {
                var parts = timeStr.split(':')
                return +parts[0] * 60 + +parts[1];

        }
}
var lrcData = parseLrc()
/**
 * 计算出，在当前情况下
 * lrcData数组中，应该高亮显示的歌词下标
 * 如果没有任何一句歌词要显示，则得到负一
 */

function findIndex() {
        //播放器当前时间
        var curTime = dom.audio.currentTime
        for (i = 0; i < lrcData.length; i++) {
                if (curTime < lrcData[i].time) {
                        return i - 1
                }

        }
        //找遍了没有找到（说明播放到最后一句）
        return lrcData.length - 1
}
findIndex()
createLrcElements()
setOffset()
/**
 * 创建歌词元素li
 */
function createLrcElements() {
        //注入文档片段
        var frag = document.createDocumentFragment()
        for (i = 0; i < lrcData.length; i++) {
                var li = document.createElement('li')
                li.textContent = lrcData[i].words
                frag.appendChild(li)

        }
        dom.ul.appendChild(frag);
}
//容器高度
var contentHeight = dom.content.clientHeight;
// console.log(contentHeight,'contentHeight')

//li高度
var liHeight = dom.ul.children[0].clientHeight;
//最大偏移量
var maxOffset = dom.ul.clientHeight - contentHeight;
// console.log(liHeight,'liHeight')
/**
 * 设置ul元素的偏移量
 */
function setOffset() {
        var index = findIndex();
        var offset = (liHeight * index) + liHeight / 2 - contentHeight / 2;
        if (offset < 0) {
                offset = 0;
        }
        if (offset > maxOffset) {
                offset = maxOffset;
        }
        dom.ul.style.transform = `translateY(-${offset}px)`;
        //去掉之前的active样式
        var li = dom.ul.querySelector('.active')
        if (li) {
                li.classList.remove('active')
        }
        li = dom.ul.children[index];
        if (li) {
                li.classList.add('active')
        }

        console.log(offset)
}
dom.audio.addEventListener('timeupdate', setOffset)
dom.audio.addEventListener('timeupdate',setOffset)
